.header {
  @apply w-full bg-bg flex items-center justify-between;
  padding: 1.875rem;
  height: 4.25rem;
  font-family: PingFang SC;

  .logoBox {
    @apply flex items-center;
    margin-right: 10.5rem;

    .logo {
      @apply h-6;
    }

    span {
      @apply text-base font-semibold text-white;
    }
  }

  .logo {
    @apply w-fit;
    height: 1.875rem;
    margin-right: 3.375rem;
  }

  .nav {
    @apply flex-1;

    & a {
      @apply text-white-80 text-sm;

      &:not(:first-child) {
        margin-left: 4.25rem;
      }

      &:hover {
        @apply text-theme;
      }
    }

    .navActive {
      @apply text-theme;
    }
  }

  .rightMenu {
    @apply flex h-full items-center;

    img {
      @apply cursor-pointer;
    }

    .question {
      width: 1.3125rem;
    }

    .message {
      @apply relative mx-10 block;
      width: 1.3125rem;
      height: 1.3125rem;

      &.hasMsg::after {
        @apply absolute right-0 top-0 rounded-50 bg-red;
        content: '';
        width: 0.375rem;
        height: 0.375rem;
      }

      & > img {
        @apply w-full h-full;
      }
    }

    .head {
      @apply relative h-full flex items-center h-9;

      &::after {
        @apply absolute w-full right-0 bottom-0 z-4;
        height: 1.625rem;
        bottom: -1.625rem;
        content: '';
      }

      &:hover {
        .loginedBox {
          @apply flex;
        }
      }

      .headBtn {
        @apply h-full flex items-center justify-between;
        width: 18.75rem;
        border-radius: 1rem;
        background: rgba(255, 255, 255, 0.1);
        padding: 0 1.875rem;

        & > span {
          @apply text-sm font-medium text-white flex-1 mr-2;
        }

        & > img {
          width: 1.375rem;
          height: 1.375rem;
        }
      }

      .loginedBox {
        @apply absolute bg-white right-0 rounded flex-col hidden items-center justify-center z-10;
        box-shadow: 0.1875rem 1.375rem 3.125rem -0.125rem rgba(121, 120, 130, 0.15);
        width: 18.75rem;
        height: 6.875rem;
        padding: 0.625rem;
        top: 3.875rem;

        .btn {
          @apply h-10 w-full rounded text-sm font-semibold text-center leading-10 cursor-pointer text-main-aa;
          &:hover {
            @apply text-theme;
            background: #fff1ee;
          }
        }
      }
    }
  }
}
